<template>
    <div class="field-condition-container">
        <div v-if="current.conditions.length === 0">
            <a-button type="primary" @click="add()">新增</a-button>
        </div>
        <div v-for="(_item, idx) in current.conditions" :key="_item.id" style="margin-bottom: 10px;">
            <field-condition-item v-model="current.conditions[idx]" :index="idx" @add="add" @remove="remove"
                                  @edit-text-area="editTextArea"/>
        </div>
        <a-modal v-model:visible="condition.dialog" title="请输入terms条件" render-to-body unmount-on-close draggable
                 :mask-closable="false" :footer="false">
            <monaco-editor v-model="current.conditions[condition.index].value" language="json" height="200px"/>
        </a-modal>
    </div>
</template>
<script lang="ts" setup>
import {ref} from "vue";

import FieldConditionItem from "./item.vue";
import {current} from "@/store/components/BaseSearchStore";
import MonacoEditor from "@/components/monaco-editor/index.vue";

const condition = ref({
    dialog: false,
    index: 0
});


function add() {
    current.value.conditions.push({
        id: new Date().getTime(),
        type: 'must',
        field: '',
        condition: 'term',
        value: '',
        isEnable: true
    });
}

function remove(id: number) {
    if (current.value.conditions.length === 0) {
        return;
    }
    current.value.conditions.splice(current.value.conditions.findIndex(item => item.id === id), 1);
}

function editTextArea(index: number) {
    condition.value.dialog = true;
    condition.value.index = index;
}

</script>
<style scoped>
.field-condition-container {
    display: block;
}
</style>
